<template>
    <div>
        <el-button type="primary" class="btn" round @click="modifyPwd">修改密码</el-button>
        <div>
            <el-table
                    :data="tableData"
                    style="width: 100%" >
                <el-table-column
                        prop="property"
                        width="280">
                </el-table-column>
                <el-table-column
                        prop="val"
                        width="">
                </el-table-column>
            </el-table>
        </div>
        <el-dialog title="修改密码" :visible.sync="modifyDialogVisible" width="40%" style="height: 500px" >
            <el-form :rules="modify_password_form_rules" :model="modify_password_form" >
                <el-form-item label="原密码" prop="origin_password">

                    <el-col :span="18">
                        <el-input placeholder="请输入原密码" v-model="modify_password_form.origin_password" maxlength="20"
                                  show-word-limit show-password></el-input>
                    </el-col>
                </el-form-item >
                <el-form-item label="新密码" prop="new_password">
                    <el-col :span="18">
                        <el-input placeholder="请输入您的新密码" v-model="modify_password_form.new_password" maxlength="20"
                                  show-word-limit show-password></el-input>
                    </el-col>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                    <el-button @click="modifyDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="modify">修改</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                tableData: [],
                modify_password_form:{
                    origin_password: '',
                    new_password: ''
                },
                modifyDialogVisible: false,
                modify_password_form_rules: {
                    origin_password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 6, max: 20, message: '请输入6-20位原密码', trigger: 'blur' }
                    ],
                    new_password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 6, max: 20, message: '请输入6-20位新密码', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            modifyPwd() {
                this.modifyDialogVisible = true
            },
            modify() {
                let data = {
                    "token": this.$store.state.token,
                    'origin_password': this.modify_password_form.origin_password,
                    'new_password': this.modify_password_form.new_password
                }
                this.$http.post('/updatePassword', data).then( res => {
                    if (res.data.code === 200) {
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        })
                        this.modifyDialogVisible = false
                        this.reset()
                    }
                    else if (res.data.code === 403 && res.data.type === 'request_error') {
                        this.$message.error('原密码输入错误')
                    }
                    else if (res.data.code === 403 && res.data.type === 'password_length_error') {
                        this.$message.error('请输入正确的数据')
                    }
                    else {
                        this.$message.error('未知错误')
                    }
                })
            },
            reset() {
                this.modify_password_form.origin_password = ''
                this.modify_password_form.new_password = ''
            },
            fetch() {
                let data = {"token": this.$store.state.token}
                this.$http.post('/getCurrentUserInfo', data).then( res => {
                    this.tableData = res.data.data
                })
            }
        },
        created() {
            this.fetch()
        }
    }
</script>

<style lang="less" scoped>

    .btn{
        margin-bottom: 10px;
        float: right;
    }
</style>
